@import "variables";
.match-filter-page{
  width:100%;
  height:100%;
  .match-filter-title{
    width:100%;
    height:pxTorem(90);
    position: relative;
    margin-bottom:pxTorem(20);
    .back {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: pxTorem(30);
      margin: auto;
      @include icon(21, 40, '/assets/icon/back_btn.png')
    }
    span{
      display: block;
      width:100%;
      text-align: center;
      line-height: 4.5rem;
      @include font-dpr(30px);
    }
  }
  .match-filter-title:after{
    display: block;
    content: '';
    width:100%;
    height:pxTorem(15);
    background:color($h5,c9);
  }
  .match-filter-content{
    width:100%;
    height:calc(100% - 12rem);
    padding:0 pxTorem(20);
    overflow: scroll;
    .match-clume{
      .clume-header{
        @include font-dpr(26px);
        color:color($h5,c3);
        padding-bottom:0;
        padding-top:pxTorem(30);
        span{
        }
        i{
          margin-top:pxTorem(8);
          float:right;
          width:pxTorem(22);
          height:pxTorem(13);
          display: block;
          background:url('../../../../assets/icon/arrow.png')center center no-repeat;
          background-size: pxTorem(20) pxTorem(11);
          transform: rotate(-90deg);
        }
      }
      ul{
        width:100%;
        overflow: hidden;
        li{
          display: block;
          float:left;
          padding: 0 pxTorem(10);
          width:32%;
          height:pxTorem(90);
          line-height: pxTorem(90);
          text-align: center;
          @include font-dpr(28px);
          background:color($h5,c8);
          border-radius:pxTorem(5);
          margin:pxTorem(30) 2% 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .filter-current{
          background:color($h5,c1);
          color:color($h5,c10);
        }
        li:nth-child(3n){
          margin-right:0;
        }
      }
    }
  }
  .type-submit{
    width:100%;
    padding: pxTorem(20);
    background:rgba(#fff,1);
    position: fixed;
    bottom:0;
    left:0;
    .submit-button{
      width:100%;
      height:pxTorem(90);
      line-height: pxTorem(90);
      text-align: center;
      background:color($h5,c1);
      @include font-dpr(30px);
      color:color($h5,c10);
      border-radius: pxTorem(5);
    }
  }
  .type-submit:before{
    position: absolute;
    top:0;
    left:0;
    z-index: 9;
    display: block;
    content: '';
    width:100%;
    height:1px;
    border-top:1px solid color($h5,c9);
    transform: scaleY(0.5);
  }
}
